<template>
	<div class="form-control">
		<el-form :model="clazz" label-width="auto">
			<el-form-item label="班级名称">
				<el-select v-model="clazz.name" clearable placeholder="请选择班级名称" @change="seleClass">
<!--          <template v-for="clazz in clazzList">-->
<!--            <el-option :label="clazz.name" :value="clazz.id" @change="seleClass(clazz.name)"/>-->
<!--          </template>-->
            <el-option v-for="clazz in clazzList" :label="clazz.name" :value="clazz.id" :key="clazz.id"/>
				</el-select>
			</el-form-item>

      <el-form-item label="课程时长">
				<el-input :model-value="clazz.duration" readonly placeholder="请输入课程时长">
				    <template #append>月</template>
				</el-input>
			</el-form-item>

			<el-form-item label="班主任">
				<el-input
					 :model-value="clazz.mange_name" type="text" readonly placeholder="请输入班主任名称"/>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
  created() {
    window.$bus.on("switch-clazz", this.switchClass)
    //数据在加载的时候,获取班级信息
    this.$api.modifyClass().then(ret=>{
      console.log(ret)
      // for (let i in ret){
      //   this.clazz.push({id:i.id,name:i.name,mange_name:i.mange_name})
      // }
      this.clazzList=ret
    })

  },
  data(){
		return {
			clazz: {
				name: "", //存储的是选中班级的id
        duration:"",
        mange_name:"",
			},
      clazzList:[],//11
		}
	},
  methods:{
    switchClass(index){
      //根据传入的id 查询 班级名称,并修改该用户的班级id
      this.$api.switchClass_by_clazz_id(this.clazz.name).then(ret=>{
          this.clazz=ret;

         // 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
        // 父页面 监听 close-win , 并关闭该窗口 刷新
        parent.$bus.emit('close-win-refresh', index);
      })
    }
  },
}
</script>

<style scoped>
.form-control {
	padding: 30px 30px 10px;
}
</style>